<template>
  <div>
    <!-- 搜索框 -->
    <div class="searchBox">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        background="transparent"
        @search="onSearch"
      >
        <template v-slot:label>
          <span @click="onLocation">
            <span>{{currentCity}}</span>
            <van-icon name="arrow-down" />
          </span>
        </template>
        <template #action>
          <van-icon name="location-o" size="25" color="#fff" @click="onMap" />
        </template>
      </van-search>
    </div>
    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in swipePic" :key="item.id">
        <img :src="'http://liufusong.top:8080' + item.imgSrc" :alt="item.id">
      </van-swipe-item>
    </van-swipe>
    <!-- 链接分类图片 -->
    <van-grid square gutter="10">
      <van-grid-item v-for="value in 4" :key="value" icon="photo-o" />
    </van-grid>
    <!-- 链接分类文字 -->
    <van-grid class="text">
      <van-grid-item text="整租" />
      <van-grid-item text="合租" />
      <van-grid-item text="地图找房" />
      <van-grid-item text="去出租" @click="onGoRent" />
    </van-grid>
    <!-- 租房小组 -->
    <div  class="van-grid-group">
      <van-cell-group>
        <van-cell title="租房小组" value="更多" class="van-cell-bgc"/>
      </van-cell-group>
      <van-grid :column-num="2" gutter="10" direction="horizontal">
        <van-grid-item v-for="(value, index) in groupPic" :key="value.id" class="group-item">
          <img :src="'http://liufusong.top:8080' + value.imgSrc" alt="" class="group-image">
          <p class="group-text">{{groupPic[index].desc}}<br>{{groupPic[index].title}}</p>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import { getSwiperSrc } from '@/api/swiperSrc.js'
import { getGroup } from '@/api/groupMessage.js'
import { mapState } from 'vuex'
export default {
  data () {
    return {
      value: '',
      swipePic: [],
      groupPic: []
    }
  },

  computed: {
    ...mapState(['currentCity'])
  },

  created () {
    this.getSwiperPic()
    this.getGroupMes()
  },

  methods: {
    onSearch () {
      console.log('搜索中')
    },
    async getSwiperPic () {
      // console.log(111222)
      const res = await getSwiperSrc()
      // console.log(res.data.body)
      this.swipePic = res.data.body
    },
    onMap () {
      console.log('进入百度地图')
    },
    async getGroupMes () {
      // console.log(2233)
      const res = await getGroup()
      // console.log(res.data.body)
      this.groupPic = res.data.body
    },
    onLocation () {
      this.$router.push({
        path: '/location'
      })
    },
    // 点击跳转房源页面
    onGoRent () {
      this.$router.push({
        path: '/rentOut'
      })
    }
  }
}
</script>

<style scoped lang='less'>
  /deep/.van-field__control {
    font-size: 14px;
  }
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
    height: 425px;
    img {
      width: auto;
      height: 425px;
    }
  }
  .searchBox {
    position: fixed;
    top: 7px;
    width: 100%;
    z-index: 100;
    border-radius: 5px;
  }
  .van-search {
    display: flex;
    .van-search__content {
      flex: 1;
    }
  }
  .van-icon {
    margin-top: 8px;
  }
  /deep/.van-grid-item__content--square {
    border-color: transparent;
    border-radius: 50%;
    background-color: #F2FBF7;
  }
  /deep/[class*=van-hairline]::after {
    border: 0;
  }
  .van-grid {
    margin-top: 10px;
  }
  .text {
    margin-top: -8px;
  }
  /deep/.van-grid-item__text {
    font-size: 14px;
  }
  .van-grid-group {
    background-color: #F6F5F6;
    padding-bottom: 10px;
  }
  /deep/.van-cell-bgc {
    background-color: transparent;
  }
  .van-cell-group {
    background-color: transparent;
    margin-bottom: -10px;
  }
  .van-cell {
    font-size: 16px;
    font-weight: 700;
  }
  /deep/.van-grid-item__content {
    border-radius: 10px;
  }
  .group-image {
    width: 115px;
  }
  .group-text {
    font-size: 16px;
    margin: 0;
  }
</style>
